<template>
  <div class="topChild">
    <span class="topTitle">校招漏斗图</span>
    <div id="ldcontainer" style="width: 100%; height: 100%; margin-top: 30px">
      <highcharts
        :options="chartOptions"
        class="myHighCharts"
        style="width: 97%; height: 100%"
      ></highcharts>
    </div>
    <!--底部三个图形-->
    <!-- <div class="bottomIcon">
      <div class="partOne">
        <span>简历数&nbsp;(300)</span>
      </div>
      <div class="partTwo">
        <span>约面试&nbsp;(20)</span>
      </div>
      <div class="partThree">
        <span>预录用&nbsp;(5)</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import funnel from "highcharts/modules/funnel";
funnel(Highcharts);
exportingInit(Highcharts);
import Vue from "vue";
import HighchartsVue from "highcharts-vue";
Vue.use(HighchartsVue, {
  highcharts: Highcharts,
});
export default {
  name: "topChild",
  data() {
    return {
      chartOptions: {
        chart: {
          backgroundColor: "#040964",
          type: "funnel",
          marginLeft: 90,
          marginRight: 110,
          marginTop:90,
          marginBottom:80
        },
        title: {
          text: "",
          x: -50,
        },
        credits: {
          enabled: false, //不显示LOGO
        },
        exporting: { enabled: false },
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
              crop: false,
              overflow: "none",
              format: "<b>{point.name}</b> ({point.y:,.0f})",
              style: {
                fontSize: "13px",
              },
              color:
                (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                "white",
              softConnector: true,
            },
            neckWidth: "30%",
            neckHeight: "25%",
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "用户",
            data: [
              ["简历数", 300, "white"],
              ["约面试", 20],
              ["预录用", 5],
            ],
            colors: ["#56c3f0", "#0394ff", "#0061e3"], //漏洞颜色
          },
          {
            itemStyle: { color: "#fffffd" },
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.topChild {
  height: 390px;
  background: url("../../../assets/数据屏/左1@2x.png") no-repeat;
  background-size: 100% 100%;
  
  background-position: center center;
  position: relative;
  .topTitle {
    position: absolute;
    left: 50%;
    top: 9px;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 15px;
    color: #feffff;
  }
  #ldcontainer {
    position: absolute !important;
    top: 15px !important;
    height: 85% !important;
    /deep/.myHighCharts {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      .highcharts-container {
        width: 100% !important;
        height: 100% !important;
        .highcharts-root {
          height: 100%;
          position: relative !important;
          .highcharts-plot-background {
            position: absolute !important;
            left: 30px !important;
          }
        }
      }
    }
  }
  .bottomIcon {
    position: absolute;
    width: 85%;
    height: 50px;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      width: 33%;
      height: 100%;
      background: url("../../../assets/数据屏/ml.png") no-repeat;
      background-size: contain;
      background-position: center center;
      position: relative;
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 12px;
        color: #feffff;
      }
    }
  }
}
</style>
